<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/17 0017
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品档案管理登记</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/ProductDesign/product_dossier_registration.css" />
    <style type="text/css">

    </style>
</head>
<body>
<div class="panel product">
    <div class="panel-heading hhead">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <span style="color: blue;">您正在做的业务是：</span>
                <li class="breadcrumb-item"><a href="#">产品设计</a></li>
                <li class="breadcrumb-item"><a href="#">产品档案管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">产品档案管理</li>
            </ol>
        </nav>
    </div>
    <div id="btnDiv">
        <button class="btn btn-primary Btn" id="submitBtn">提交</button>
        <button class="btn btn-primary Btn">清除</button>
    </div>
    <div class="panel-body bbody">
        <div id="bigBox" style="border: 1px solid black;">
            <div class="Gradient" style="height: 40px;color: white;font-weight: 700;"><span style="margin-left: 5px;">主信息</span></div>
            <form class="form-horizontal productForm needs-validation" id="DFileFm" novalidate>
                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label" for="productName"><span style="color: red;">*</span>产品名称：</label>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" name="productName" class="form-control inputt" id="productName" required/>
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">制造商：</label>
                    </div>
                    <div class="col-sm-4 ">
                        <input name="factoryName" class="form-control inputt" />
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label"><span style="color: red;">*</span>I级分类：</label>
                    </div>
                    <div class="col-sm-4">
                        <input type="hidden" name="firstKindName" value="" id="firstKindName">
                        <select name="firstKindId" class="form-control i2" id="firstLevel" >
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label"><span style="color: red;">*</span>II级分类：</label>
                    </div>
                    <div class="col-sm-4">
                        <input type="hidden" name="secondKindName" value="" id="secondKindName">
                        <select name="secondKindId" class="form-control i2" id="secondLevel">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label"><span style="color: red;">*</span>III级分类：</label>
                    </div>
                    <div class="col-sm-4">
                        <input type="hidden" name="thirdKindName" value="" id="thirdKindName">
                        <select name="thirdKindId" class="form-control i2" id="thirdLevel">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">产品简称：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="productNick" class="form-control i2" />
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">用途类型：</label>
                    </div>
                    <div class="col-sm-4">
                        <select name="type" class="form-control i2" id="use">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label ">档次级别：</label>
                    </div>
                    <div class="col-sm-4">
                        <select name="productClass" class="form-control i2" id="grade">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">计量单位：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="personalUnit" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">计量值：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="personalValue" class="form-control i2" />
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label"><span style="color: red;">*</span>市场单价(元)：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="listPrice" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label"><span style="color: red;">*</span>计划成本价：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="costPrice" class="form-control i2" />
                    </div>
                </div>

                <div id="Fu" class="Gradient" style="height: 40px;color: white;font-weight: 700;"><span style="margin-left: 5px;">辅助信息</span></div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">保修期：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">替代品名称：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="warranty" class="form-control i2" />
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">替代品编号：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="twinId" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">生命周期(年)：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="lifecycle" class="form-control i2" />
                    </div>
                </div>

                <div class="row " style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">单位：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="amountUnit" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">产品经理：</label>
                    </div>
                    <div class="col-sm-4">
                        <select name="responsiblePerson" class="form-control inputt" id="manger">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label" style="line-height:50px;">供应商集合：</label>
                    </div>
                    <div class="col-sm-4">
                        <textarea name="providerGroup" class="form-control"></textarea>
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label" style="line-height:50px;">产品描述：</label>
                    </div>
                    <div class="col-sm-4">
                        <textarea name="productDescribe" class="form-control"></textarea>
                    </div>
                </div>

                <div class="row r" style="text-align: right;">
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">登记人：</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="register" class="form-control i2" />
                    </div>
                    <div class="col-sm-2 aa">
                        <label class="col-form-label">建档时间：</label>
                    </div>
                    <div class="col-sm-4">
                        <input id="time" name="registerTime" class="form-control i2"/>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/jquery_validate_messages_zh.js"></script>
<style type="text/css">
    .error{
        color:red;
    }
    label .error
    {
        color:Red;
        font-size:10px;
        margin-left:5px;
        padding-left:16px;
    }
</style>
<script type="text/javascript">
    $(function(){
        // 初始化表单验证
        let validator = $('#DFileFm').validate({
            rules: {
                productName: {
                    required: true
                },
                firstKindId: {
                    required: true
                },
                secondKindId: {
                    required: true
                },
                thirdKindId: {
                    required: true
                },
                type: {
                    required: true
                },
                listPrice: {
                    required: true
                },
                costPrice: {
                    required: true
                },
                type:{
                    required: true
                },
                productClass:{
                    required: true
                },
                responsiblePerson:{
                    required: true
                }
            },
            messages: {
                productName: {
                    required: "请输入产品名称"
                },
                firstKindId: {
                    required: "请选择一级分类"
                },
                secondKindId: {
                    required: "请选择二级分类"
                },
                thirdKindId: {
                    required: "请选择三级分类"
                },
                type: {
                    required: "请选择使用类型"
                },
                listPrice: {
                    required: "请输入市场单价"
                },
                costPrice: {
                    required: "请输入计划成本价"
                }

            },
            submitHandler: function(form){
                let json = formDateToJson("DFileFm");
                console.log(json);
                $.ajax({
                    url: "/d-file/insertProduct",
                    type:"POST",
                    data:json,
                    contentType: "application/json",
                    dataType:"json",
                    success: function (flag) {
                        if (flag.errCode == "1") {
                            alert(flag.errMsg)
                        } else {
                            if(flag){
                                alert("添加成功")
                            }else{
                                alert("系统错误")
                            }
                        }
                    }
                })
            }
        })
        // 初始化时间
        setInterval(updateDateTime, 1000);
        // 初始化一级分类
        initialFirstLevel();
        // 一级分类选择事件
        $('#firstLevel').on('change', function () {
            let firstId = $(this).val();
            if (firstId == '') {
                $('#secondLevel option:gt(0)').remove();
                $('#thirdLevel option:gt(0)').remove();
                return;
            }
            // 存储一级分类名称
            $('#firstKindName').val($(this).find('option:selected').text());
            // 初始化二级分类
            initialSecondLevel(firstId);
        });
        // 二级分类选择事件
        $('#secondLevel').on('change', function () {
            let secondId = $(this).val();
            if (secondId == '') {
                $('#thirdLevel option:gt(0)').remove();
                return;
            }
            // 存储二级分类名称
            $('#secondKindName').val($(this).find('option:selected').text());
            // 存储二级分类名称
            initialThirdLevel(secondId);
        });
        // 三级分类选择事件
        $('#thirdLevel').on('change', function () {
            let thirdId = $(this).val();
            if (thirdId == '') {
                return;
            }
            // 存储三级分类名称
            $('#thirdKindName').val($(this).find('option:selected').text());
        });
        // 初始化使用类型
        initialUse();
        // 初始化档次级别
        initialGrade();
        // 初始化产品经理
        initialManger();
        // 提交按钮点击事件
        $('#submitBtn').on('click', function () {
            $('#DFileFm').submit();
        })
    })
    function updateDateTime(){
        let date = new Date();
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2,'0');
        let hours = date.getHours().toString().padStart(2,'0');
        let minutes = date.getMinutes().toString().padStart(2,'0');
        let seconds = date.getSeconds().toString().padStart(2,'0');
        let dateTimeStr = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        $("#time").val(dateTimeStr);
    }
    function initialFirstLevel() {
        $.ajax({
            url: "/d-level-first/initialLevel",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let firstLevel = $('#firstLevel');
                $('#firstLevel option:gt(0)').remove();
                $('#secondLevel option:gt(0)').remove();
                $('#thirdLevel option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].firstId);
                    option.text(data[i].firstName);
                    firstLevel.append(option);
                }
            }
        })
    }
    function initialSecondLevel(firstId) {
        $.ajax({
            url: "/d-level-second/initialLevel?firstId="+firstId,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let secondLevel = $('#secondLevel');
                $('#secondLevel option:gt(0)').remove();
                $('#thirdLevel option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].secondId);
                    option.text(data[i].secondName);
                    secondLevel.append(option);
                }
            }
        })
    }
    function initialThirdLevel(secondId) {
        $.ajax({
            url: "/d-level-third/initialLevel?secondId="+secondId,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let thirdLevel = $('#thirdLevel');
                $('#thirdLevel option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].thirdId);
                    option.text(data[i].thirdName);
                    thirdLevel.append(option);
                }
            }
        })
    }
    function initialUse() {
        $.ajax({
            url: "/d-product-use/initialUse",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let use = $('#use');
                $('#use option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].useId);
                    option.text(data[i].useName);
                    use.append(option);
                }
            }
        })
    }
    function initialGrade() {
        $.ajax({
            url: "/d-grade/initialGrade",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let grade = $('#grade');
                $('#grade option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].gradeId);
                    option.text(data[i].gradeName);
                    grade.append(option);
                }
            }
        })
    }
    function initialManger() {
        $.ajax({
            url: "/sys-manger/initialManger",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let manger = $('#manger');
                $('#manger option:gt(0)').remove();
                for (let i = 0; i < data.length; i++) {
                    let option = $('<option>');
                    option.val(data[i].mangerId);
                    option.text(data[i].mangerName);
                    manger.append(option);
                }
            }
        })
    }




</script>
</body>
</html>

